import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(scrollBehavior: MyCustomScrollBehavior(), home: MyApp2()));
}

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

class MyApp2 extends StatefulWidget {
  const MyApp2({super.key});

  @override
  State<MyApp2> createState() => _MyApp2State();
}

class _MyApp2State extends State<MyApp2> {
  bool isVertical = true;
  var list = [
    '上海',
    '北京',
    '深圳',
    '天津',
    '邯郸',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('测试ListView'),
      ),
      body: ListView(
        //通过该属性,设置朝向是垂直还是横向
        scrollDirection: isVertical ? Axis.vertical : Axis.horizontal,
        children: [
          TextButton(
            onPressed: () {
              setState(() {
                isVertical = !isVertical;
              });
            },
            child: Text('点我切换方向'),
          ),
          ...buildListItem()
        ],
      ),
    );
  }

  List<Widget> buildListItem() {
    return list.map((e) => isVertical ? _buildVItem(e) : _buildHItem(e)).toList();
  }

//构建纵向列表item
  Widget _buildVItem(String cityNam) {
    return Container(
      margin: EdgeInsets.only(bottom: 5),
      padding: EdgeInsets.only(top: 10, bottom: 10),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.green),
      child: Text(
        '$cityNam',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.tealAccent),
      ),
    );
  }

//构建横向item
  Widget _buildHItem(String cityNam) {
    return Container(
      width: 100,
      height: 100,
      margin: EdgeInsets.only(right: 5),
      padding: EdgeInsets.only(right: 10, left: 10),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.green),
      child: Text(
        '$cityNam',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.tealAccent),
      ),
    );
  }
}
